            $(function() {
    /**
    * interval : time between the display of images
    * playtime : the timeout for the setInterval function
    * current  : number to control the current image
    * current_thumb : the index of the current thumbs wrapper
    * nmb_thumb_wrappers : total number of thumbs wrappers
    * nmb_images_wrapper : the number of images inside of each wrapper
    */
    var interval   = 8000;
    var playtime;
    var current    = 0;
    var current_thumb   = 0;
    var nmb_thumb_wrappers = $('#msg_thumbs .msg_thumb_wrapper').length;
    var nmb_images_wrapper  = 6;
    /**
    * start the slideshow
    */
    play();
    
    /**
    * show the controls when 
    * mouseover the main container
    */
    slideshowMouseEvent();
    function slideshowMouseEvent(){
     $('#msg_slideshow').unbind('mouseenter')
            .bind('mouseenter',showControls)
            .andSelf()
            .unbind('mouseleave')
            .bind('mouseleave',hideControls);
     }
    
    /**
    * clicking the grid icon,
    * shows the thumbs view, pauses the slideshow, and hides the controls
    */
    $('#msg_grid').bind('click',function(e){
     hideControls();
     $('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
     pause();
     $('#msg_thumbs').stop().animate({'top':'0px'},500);
     e.preventDefault();
    });
    
    /**
    * closing the thumbs view,
    * shows the controls
    */
    $('#msg_thumb_close').bind('click',function(e){
     showControls();
     slideshowMouseEvent();
     $('#msg_thumbs').stop().animate({'top':'-230px'},500);
     e.preventDefault();
    });
    
    /**
    * pause or play icons
    */
    $('#msg_pause_play').bind('click',function(e){
     var $this = $(this);
     if($this.hasClass('msg_play'))
      play();
     else
      pause();
     e.preventDefault(); 
    });
    
    /**
    * click controls next or prev,
    * pauses the slideshow, 
    * and displays the next or prevoius image
    */
    $('#msg_next').bind('click',function(e){
     pause();
     next();
     e.preventDefault();
    });
    $('#msg_prev').bind('click',function(e){
     pause();
     prev();
     e.preventDefault();
    });
    
    /**
    * show and hide controls functions
    */
    function showControls(){
     $('#msg_controls').stop().animate({'right':'15px'},500);
    }
    function hideControls(){
     $('#msg_controls').stop().animate({'right':'-110px'},500);
    }
    
    /**
    * start the slideshow
    */
    function play(){
     next();
     $('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
     playtime = setInterval(next,interval)
    }
    
    /**
    * stops the slideshow
    */
    function pause(){
     $('#msg_pause_play').addClass('msg_play').removeClass('msg_pause');
     clearTimeout(playtime);
    }
    
    /**
    * show the next image
    */
    function next(){
     ++current;
     showImage('r');
    }
    
    /**
    * shows the previous image
    */
    function prev(){
     --current;
     showImage('l');
    }
    
    /**
    * shows an image
    * dir : right or left
    */
    function showImage(dir){
     /**
     * the thumbs wrapper being shown, is always 
     * the one containing the current image
     */
     alternateThumbs();
     
     /**
     * the thumb that will be displayed in full mode
     */
     var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
        .find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')')
        .find('img');
     if($thumb.length){
      var source = $thumb.attr('alt');
      var $currentImage = $('#msg_wrapper').find('img');
      if($currentImage.length){
       $currentImage.fadeOut(function(){
        $(this).remove();
        $('<img />').load(function(){
         var $image = $(this);
         resize($image);
         $image.hide();
         $('#msg_wrapper').empty().append($image.fadeIn());
        }).attr('src',source);
       });
      }
      else{
       $('<img />').load(function(){
         var $image = $(this);
         resize($image);
         $image.hide();
         $('#msg_wrapper').empty().append($image.fadeIn());
       }).attr('src',source);
      }
        
     }
     else{ //this is actually not necessary since we have a circular slideshow
      if(dir == 'r')
       --current;
      else if(dir == 'l')
       ++current; 
      alternateThumbs();
      return;
     }
    }
    
    /**
    * the thumbs wrapper being shown, is always 
    * the one containing the current image
    */
    function alternateThumbs(){
     $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
         .hide();
     current_thumb = Math.ceil(current/nmb_images_wrapper);
     /**
     * if we reach the end, start from the beggining
     */
     if(current_thumb > nmb_thumb_wrappers){
      current_thumb  = 1;
      current   = 1;
     } 
     /**
     * if we are at the beggining, go to the end
     */     
     else if(current_thumb == 0){
      current_thumb  = nmb_thumb_wrappers;
      current   = current_thumb*nmb_images_wrapper;
     }
     
     $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
         .show(); 
    }
    
    /**
    * click next or previous on the thumbs wrapper
    */
    $('#msg_thumb_next').bind('click',function(e){
     next_thumb();
     e.preventDefault();
    });
    $('#msg_thumb_prev').bind('click',function(e){
     prev_thumb();
     e.preventDefault();
    });
    function next_thumb(){
     var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')');
     if($next_wrapper.length){
      $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
          .fadeOut(function(){
           ++current_thumb;
           $next_wrapper.fadeIn();         
          });
     }
    }
    function prev_thumb(){
     var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')');
     if($prev_wrapper.length){
      $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
          .fadeOut(function(){
           --current_thumb;
           $prev_wrapper.fadeIn();         
          });
     }    
    }
    
    /**
    * clicking on a thumb, displays the image (alt attribute of the thumb)
    */
    $('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){
     var $this   = $(this);
     $('#msg_thumb_close').trigger('click');
     var idx   = $this.index();
     var p_idx  = $this.parent().index();
     current   = parseInt(p_idx*nmb_images_wrapper + idx + 1);
     showImage();
     e.preventDefault();
    }).bind('mouseenter',function(){
     var $this   = $(this);
     $this.stop().animate({'opacity':1});
    }).bind('mouseleave',function(){
     var $this   = $(this); 
     $this.stop().animate({'opacity':0.5});
    });
    
    /**
    * resize the image to fit in the container (400 x 400)
    */
    function resize($image){
     var theImage  = new Image();
     theImage.src  = $image.attr("src");
     var imgwidth  = theImage.width;
     var imgheight  = theImage.height;
     
     var containerwidth  = 550;
     var containerheight = 435;
                
     if(imgwidth > containerwidth){
      var newwidth = containerwidth;
      var ratio = imgwidth / containerwidth;
      var newheight = imgheight / ratio;
      if(newheight > containerheight){
       var newnewheight = containerheight;
       var newratio = newheight/containerheight;
       var newnewwidth =newwidth/newratio;
       theImage.width = newnewwidth;
       theImage.height= newnewheight;
      }
      else{
       theImage.width = newwidth;
       theImage.height= newheight;
      }
     }
     else if(imgheight > containerheight){
      var newheight = containerheight;
      var ratio = imgheight / containerheight;
      var newwidth = imgwidth / ratio;
      if(newwidth > containerwidth){
       var newnewwidth = containerwidth;
       var newratio = newwidth/containerwidth;
       var newnewheight =newheight/newratio;
       theImage.height = newnewheight;
       theImage.width= newnewwidth;
      }
      else{
       theImage.width = newwidth;
       theImage.height= newheight;
      }
     }
     $image.css({
      'width' :theImage.width,
      'height':theImage.height
     });
    }
            });